<template>
    <div>
        <!-- 选项式Api (OptionsApi) -->
        <h4>组合式API(CompositionApi)-语法</h4>
        <ul>
            <li>组合式API的生命周期钩子函数，不存在beforeCreate、created函数，因为setup函数完全可以实现相关功能</li>
            <li>组合式API的代码书写方式等效于同步JS代码，所以钩子函数作为功能事件函数，以on描述</li>
            <li>组合式API的的生命周期钩子函数，以传入回调方法的方式完成执行函数的定义</li>
        </ul>
        <ul>
            <li>组合式API中，如果需要加载被渲染后的DOM元素，在元素上定义ref后，组合式API中通过相同变量名+ref指向函数进行操作</li>
        </ul>
        <p ref="pDom">msg:{{ msg }}</p>
        <input v-model="msg" type="text" /> <br><br>
        <div class="box" ref="echartDom"></div>
        <hr>
        <ul>
            <li>组合式API使用时，如果组件采用 setup 的 script 标签构成，组件导入时会自动完成组件定义</li>
            <li>
                组合式API中，父向子进行数据传递规则和特性不发生任何改变，在子组件中需要通过 defineProps() 描述拦截属性<br>
                    + defineProps([]) 或者 defineProps({}) ==> 取值方式等效于 选项式API的 props 属性 <br>
                    + defineProps 返回被拦截的属性组成劫持对象，js中通过该对象对对应属性进行取值操作 <br>
            </li>
            <li>
                组合式API中，子向父进行数据传递规则和特性不发生任何改变，在子组件中需要通过 defineEmits() 描述拦截方法<br>
                    + defineEmits([]) ==> 取值方式等效于 选项式API的 emits 属性 <br>
                    + defineEmits 返回一个 emit 触发函数，通过该函数调用拦截的方法 => 使用规则等效于 $emit <br>
            </li>
        </ul>
        <p>num:{{ num }}</p>
        <input v-model.number="num" type="number" /> <br><br>
        <p>flag:{{ flag }}</p>
        <p>password : {{ password }}</p>
        <input v-model="password" type="text" /> <br><br>

        <CompositionComp :num="num" username="admin" @update:flag="updateFalg" v-model="password"></CompositionComp>
    </div>
</template>
<!-- <script>
import CompositionComp from "@/components/CompositionComp.vue";

export default {
    components:{
        CompositionComp
    },
    data() {
        return {
            msg: "msg默认值"
        }
    },
    created(){
        this.msg = Math.random();
    },
    mounted:function(){
        console.log( this.$refs.pDom );
    }
}
</script> -->
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
// 加载组件的同时完成组件注册
import CompositionComp from "@/components/CompositionComp.vue";

let msg = ref("msg默认值");

// msg.value = Math.random();
const initMsg = function () {
    // console.log(msg)
    msg.value = Math.random();
    // console.log(msg)
}
initMsg();

// vue渲染时，会自动根据变量名 pDom 加载页面完成后 DOM 对象
let pDom = ref();
console.log("pDom", pDom.value)

let options = ref({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
})
let echartDom = ref();

onMounted(function () {
    console.log("页面渲染完成", pDom.value)
    let myChart = echarts.init(echartDom.value);
    console.log(myChart)
    myChart.setOption(options.value);
});


// 组件传值
let num = ref(100);
let flag = ref(null);
const updateFalg = function(nv){
    console.log("更新flag")
    flag.value = nv;
}

let password = ref("123456")
</script>

<style lang="scss" scoped>
.box {
    width: 800px;
    height: 500px;
    border: 1px solid black;
}
</style>